<template>
  <div class="rating-container">
    <span v-for="star in 5" :key="star" class="star" @click="setStar(star)">
      {{ rating >= star ? '★' : '☆' }}
    </span>
    <!-- 写法2：通过$emit触发 -->
    <!-- <span v-for="star in 5" :key="star" class="star" @click="$emit('update-rating', 10)">
      {{ rating >= star ? '★' : '☆' }}
    </span> -->
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const props = defineProps(['rating'])   //接收父组件的数据

  // const emit = defineEmits(['update-rating'])

  /* 改成emit对象校验的形式 */
  const emit = defineEmits({
    'update-rating': (value) => {
      if (value < 1 || value > 5) {
        console.warn('传递的值有问题！！！')
        return false
      }
      return true
    }
  })

  // const rating = ref(0)  //表示几颗星,子组件自己维护
  function setStar(star) {
    // rating.value = star
    //我们需要将最新的星星状态，传递给父组件
    //触发父组件update-rating事件
    emit('update-rating', star)
  }

</script>

<style scoped>
  .rating-container {
    display: flex;
    font-size: 24px;
    cursor: pointer;
  }

  .star {
    margin-right: 5px;
    color: gold;
  }

  .star:hover {
    color: orange;
  }
</style>
